<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" leftIconColor="#fff" :placeholder="true" autoBack="true" bgColor="#F9C022" :title="title">
        </u-navbar>
        <view class="page-foot bg-white">
            <view class="flex-box plr30 ptb10">
                <view class="red fs40 flex-grow-1">
                    <text class="fs30 col5">合计：</text>
                    <text class="fs24">¥</text>
                    <text class="fwb">{{order.pay_price}}</text>
                </view>
                <view class="btn2 mr30" v-if="order.order_type==1 && order.state == 2" @click="bindLogistics()">查看物流</view>
                <view v-if="order.state == 0" class="btn2 mr30" @click="orderCancel()">取消订单</view>
                <view v-if="order.state == 0" class="btn1" @click="orderPay()">去支付</view>
                <view v-if="order.state == 2" class="btn1" @click="orderConfrm()">确认收货</view>
                <view v-if="order.aftersale && (order.aftersale.state==-1 || order.aftersale.state==4)" class="btn2" @click="orderAppeal()">申诉</view>
                <view v-if="order.state == 3" class="btn1" @click="orderComment()">立即评价</view>
                <view v-if="order.state == 5 && order.aftersale && order.aftersale.state==1" class="btn1" @click="bindFreight()">提交物流</view>
            </view>
        </view>
        <view class="container">
            <view class="xilu_bg_block"></view>
            <view class="xilu_order_detail">
                <view class="xilu_status plr30 ptb40 mb20">
                    <view class="fs36 pb20 fwb" :class="(order.state==0?'red':(order.state==1?'lightblue':(order.state==2?'col10':(order.state==3?'col5':'col10'))))">{{order.state_text}}</view>
                    <!--                 <view class="fs36 lightblue pb20 fwb">待发货</view>
                    <view class="fs36 col10 pb20 fwb">待收货</view>
                    <view class="fs36 col5 pb20 fwb">待评价</view> -->
                    <view class="fs30 col5" v-if="order.state==-1">订单已取消</view>
                    <view class="fs30 col5" v-if="order.state==0">等待买家付款，{{order.expiretime_text}}前未付款自动关闭～</view>
                    <view class="fs30 col5" v-if="order.state==1">商品已付款，请耐心等待发货～</view>
                    <view class="fs30 col5" v-if="order.state==2">{{order.order_type==2?"自提地址："+order.pick_address:'商品已发货，请注意查收～'}}</view>
                    <view class="fs30 col5" v-if="order.state==3">交易已完成，请对商品进行评价～</view>
                    <view class="fs30 col5" v-if="order.state==4">交易已完成～</view>
                </view>
                <view class="xilu_status p30 mb20" v-if="order.order_type==1">
                    <view class="fs34 col5 pb20 fwb">收货地址</view>
                    <view class="fs34 col10 pb15">{{order.order_address.Area.province+order.order_address.Area.city+order.order_address.Area.region+order.order_address.address_detail}}</view>
                    <view class="fs30 col5"><text class="pr30">{{order.order_address.name}}</text><text>{{order.order_address.mobile}}</text></view>
                </view>
                <view class="xilu_status p30 mb20">
                    <view class="fs34 col5 pb20 fwb">商品信息</view>
                    <view class="flex-box" v-for="(product,index) in order.order_product" @click="productDetail(product.id)">
                        <image :src="product.image" class="xilu_pic" mode="aspectFill"></image>
                        <view class="flex-grow-1">
                            <view class="m-ellipsis-l2 fs30 col10 mb50">{{product.product_name}}</view>
                            <view class="flex-box flex-between">
                                <view class="red fs40 "><text class="fs24">¥</text><text class="fwb">{{product.product_price}}</text>
                                </view>
                                <view class="xilu_refund" v-if="order.state==1 || order.state==3||order.state==4" @click="bindRefund()">申请退款</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="xilu_status p30 mb20">
                    <view class="fs34 col5 pb20 fwb">订单信息</view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">卖家信息</view>
                        <image :src="order.seller.avatar" mode="aspectFill" class="xilu_avatar"></image>
                        <view class="fs28 blue">{{order.seller.nickname}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">订单号</view>
                        <view class="fs28 col10">{{order.order_no}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">商品金额</view>
                        <view class="fs30 red"><text class="fs24">¥</text>{{order.total_price}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">运费</view>
                        <view class="fs30 red"><text class="fs24">¥</text>{{order.express_price}}</view>
                    </view>
                    <view class="flex-box pb30">
                        <view class="fs30 col5 flex-grow-1">支付方式</view>
                        <image src="../../static/icon/wechat.png" mode="aspectFill" class="xilu_wechat"></image>
                        <view class="fs30 col10">微信支付</view>
                    </view>
                    <view class="tr red fs40">
                        <text class="fs30 col5">合计：</text>
                        <text class="fs24">¥</text>
                        <text class="fwb">{{order.pay_price}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: "待付款",
				orderId: 0,
				order:{
					order_address:{
						Area:{province:'',city:'',region:''},
						address_detail:''
					},
					order_product:[]
				}
            };
        },
		onLoad(options) {
			this.orderId = options.id || 0;
			this.fetchDetail();
		},
		methods:{
			fetchDetail(){
				this.$core.post({url: 'xilumarket.order/order_detail',data: {order_id:this.orderId},loading: false,success: ret => {
						this.order = ret.data;
						this.title = ret.data.state_text
					},fail: err => {
						console.log(err);
					}
				});
			},
			//去支付
			orderPay(){
				uni.navigateTo({
					url: '/pages/pay_action/pay_action?order_id='+this.orderId,
					events:{
						paySuccess:data=>{
							this.fetchDetail();
						}
					}
				});
			},
			productDetail(productId){
				uni.navigateTo({
					url: '/pages/goods_detail/goods_detail?id='+productId
				})
			},
			//取消订单
			orderCancel(){
				let page = this;
				let orderId = this.orderId;
				uni.showModal({
					title: '取消提醒',
					content: '确认取消订单',
					success(res) {
						if(res.confirm){
							page.$core.post({url: 'xilumarket.order/cancel',data: {order_id: orderId},success: (ret) => {
							        uni.showToast({title: '取消成功',icon: 'none'})
							        page.fetchDetail();
							    },
							    fail: () => {
							
							    }
							})
						}
						
					}
				})
			},
			//确认收货
			orderConfrm(){
				let page = this;
				let orderId = this.orderId;
				uni.showModal({
					title: '收货提示',
					content: '确认收货成功',
					success(res) {
						if(res.confirm){
							page.$core.post({url: 'xilumarket.order/receive',data: {order_id: orderId},success: (ret) => {
							        uni.showToast({title: '收货成功',icon: 'none'})
							        page.fetchDetail();
							    },
							    fail: () => {
							
							    }
							})
						}
					}
				})
			},
			//申诉
			orderAppeal(){
				let order = this.order;
				uni.navigateTo({
					url: '/pages/appeal/appeal',
					events:{
						appealSuccess: data=>{
							this.fetchDetail();
						}
					},
					success(res) {
					    res.eventChannel.emit('appealTransfor', order)
					}
				});
			},
			//去评价
			orderComment(){
				let order = this.order,orderProduct = order.order_product;
				if(order.comment_status == 1){
					uni.showToast({title:"不要重复评价",icon: 'none'});
					return;
				}
				uni.navigateTo({
					url: '/pages/comment_now/comment_now',
					events:{
						commentSuccess: data=>{
							this.fetchDetail();
						}
					},
					success(res) {
					    res.eventChannel.emit('commentTransfor', orderProduct)
					}
				});
			},
			//退款
			bindRefund(){
				let order = this.order;
				if(order.refund_status != 0){
					uni.showToast({title:"商品不可退款",icon: 'none'});
					return;
				}
				uni.navigateTo({
					url: '/pages/refund/refund?id='+order.id,
					events:{
						aftersaleSuccess: data=>{
							this.fetchDetail();
						}
					},
					success(res) {
					    res.eventChannel.emit('refundTransfor', order)
					}
				});
			},
			//提交物流
			bindFreight(){
				let order = this.order;
				uni.navigateTo({
					url: '/pages/fill_in_order/fill_in_order',
					events:{
						freightSuccess: data=>{
							this.fetchDetail();
						}
					},
					success(res) {
					    res.eventChannel.emit('freightTransfor', order)
					}
				});
			},
			//物流
			bindLogistics(){
				uni.navigateTo({
					url: '/pages/logistics/logistics?order_id='+this.orderId
				})
			},
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_logo {
            width: 80rpx;
            height: 80rpx;
        }

        &_center_slot {
            width: 402rpx;
            height: 75rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #555555;
            margin-left: -60rpx;
            padding: 0 12rpx 0 20rpx;
        }

        &_bg {
            width: 750rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(452rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        .container {
            background-color: #f7f9fc;
            min-height: calc(100vh - 44px - var(--status-bar-height));
        }

        &_order_detail {
            position: relative;
            z-index: 4;
            padding: 30rpx;
        }

        &_status {
            background-color: var(--white);
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
        }

        &_pic {
            width: 180rpx;
            height: 180rpx;
            border-radius: 10rpx;
            margin-right: 30rpx;
        }

        &_avatar {
            width: 35rpx;
            height: 35rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        &_wechat {
            width: 30rpx;
            height: 30rpx;
            margin-right: 15rpx;
        }

        .btn1,
        .btn2 {
            width: 180rpx;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 24rpx;
        }

        &_refund {
            width: 130rpx;
            height: 55rpx;
            line-height: 55rpx;
            text-align: center;
            background: #FFF3CC;
            border-radius: 28rpx;
            font-size: 24rpx;
            color: #101010;
        }
    }
</style>
